html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;

  &.is-component {
    overflow: hidden;
  }
}

#app {
  height: 100%;

  &.is-component {
    overflow-y: hidden;

    .main-cnt {
      padding: 0;
      margin-top: 0;
      height: 100%;
      min-height: auto;
    }

    .headerWrapper {
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 1500;

      .container {
        padding: 0;
      }
    }
  }
}

a {
  color: #409eff;
  text-decoration: none;
}

code {
  padding: 0 4px;
  // border: 1px solid #1a95e7;
  border-radius: 4px;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.hljs {
  line-height: 20px;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  font-size: 12px;
  padding: 10px 24px 18px 24px;
  border: solid 1px #eaeefd;
  border-radius: 4px;
  -webkit-font-smoothing: auto;
}

.main-cnt {
  margin-top: -80px;
  padding: 80px 0 340px;
  box-sizing: border-box;
  min-height: 100%;
}

#app {
  // h2 {
  //   font-size: 28px;
  //   color: #1a95e7;
  //   margin: 0;
  // }
  // h3 {
  //   font-size: 22px;
  // }
  // h2,
  // h3,
  // h4,
  // h5 {
  //   //
  //   margin: auto;
  //   margin-top: 10px;
  //   font-weight: normal;
  //   color: #1a95e7;
  //   a {
  //     display: none;
  //   }
  //   &:hover a {
  //     opacity: 0.4;
  //   }
  // }

  // p {

  //   margin: auto;
  //   padding: 10px;
  //   font-size: 16px;
  //   color: #aecad3;
  //   line-height: 30px;
  // }

  .tip {
    margin: auto;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: #1b9ae4 5px solid;

    p {
      width: 100%;
    }

    code {
      background-color: rgb(255, 255, 255);
      color: #445368;
    }
  }

  .warning {
    margin: auto;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #fff6f7;
    border-radius: 4px;
    border-left: rgb(252, 122, 2) 5px solid;

    p {
      width: 100%;
    }

    code {
      background-color: rgba(255, 255, 255, 0.7);
      color: #445368;
    }
  }
}

@media (max-width: 1140px) {
  .container,
  .page-container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .container,
  .page-container {
    padding: 0 20px;
  }

  #app.is-component .headerWrapper .container {
    padding: 0 12px;
  }
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(101, 176, 247, 0.1);
  background: #787878;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
